<!DOCTYPE html><!--[if IE 8]><html lang="en" class="ie8 no-js"><![endif]--><!--[if IE 9]><html lang="en" class="ie9 no-js"><![endif]--><!--[if!IE]><!-->
<html lang="zxx">
<html xmlns:th="http://www.thymeleaf.org">
<!--<![endif]--><!-- Begin Head -->
<head>
<title>网上订餐系统</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="MobileOptimized" content="320">
<!--Start Style -->
<link rel="stylesheet" type="text/css" th:href="@{/css/fonts.css}">
<link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
<link rel="stylesheet" type="text/css" th:href="@{/css/font-awesome.min.css}">
<link rel="stylesheet" type="text/css" th:href="@{/css/icofont.min.css}">
<link rel="stylesheet" type="text/css" th:href="@{/css/style.css}">
<link rel="stylesheet" id="theme-change" type="text/css" href="#">
<!-- Favicon Link -->
<link rel="shortcut icon" type="image/png" th:href="@{/images/favicon.png}">
  <script src="https://code.hcharts.cn/highcharts/modules/exporting.js"></script>
  <script src="https://code.hcharts.cn/plugins/zh_cn.js"></script>
  <!--axios-->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="loader">
  <div class="spinner"><img src="assets/images/loader.gif" alt=""/></div>
</div>
<!-- Main Body -->
<div class="page-wrapper"><!-- Header Start -->
  <header class="header-wrapper main-header">
    <div class="header-inner-wrapper">
      <div class="logo-wrapper"><h2 style="color: white;">网上订餐系统</h2></div>
      <div class="header-right">
        <div class="serch-wrapper">
          <form>
            <input type="text" placeholder="Search Here...">
          </form>
          <a class="search-close" href="javascript:void(0);"><span class="icofont-close-line"></span></a></div>
        <div class="header-left">
          <div class="header-links"><a href="javascript:void(0);" class="toggle-btn"><span></span></a></div>
          <div class="header-links search-link"><a class="search-toggle" href="javascript:void(0);">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve">
              <path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23
                                    s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92
                                    c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17
                                    s-17-7.626-17-17S14.61,6,23.984,6z"/>
            </svg>
            </a></div>
        </div>
        <div class="header-controls">
          <div class="setting-wrapper header-links"><a href="javascript:void(0);" class="setting-info"><span class="header-icon">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
              <path d="M7 0h2v3h-2v-3z"></path>
              <path d="M6 4v3h1v9h2v-9h1v-3z"></path>
              <path d="M2 0h2v8h-2v-8z"></path>
              <path d="M1 9v3h1v4h2v-4h1v-3z"></path>
              <path d="M12 0h2v10h-2v-10z"></path>
              <path d="M11 11v3h1v2h2v-2h1v-3z"></path>
            </svg>
            </span></a></div>
          <div class="cart-wrapper header-links"><a href="javascript:void(0);" class="cart-info"><span class="header-icon">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
              <g>
                <g>
                  <path d="M402.351,381.058h-203.32l-11.806-47.224h266.587L512,101.085H129.038L108.882,20.46H0v33.4h82.804l82.208,328.827
                                                    c-24.053,5.971-41.938,27.737-41.938,53.611c0,30.461,24.781,55.242,55.241,55.242c30.459,0,55.241-24.781,55.241-55.242
                                                    c0-7.755-1.613-15.138-4.511-21.841h122.577c-2.897,6.703-4.511,14.086-4.511,21.841c0,30.461,24.781,55.242,55.241,55.242
                                                    c30.459,0,55.241-24.781,55.241-55.242C457.592,405.84,432.811,381.058,402.351,381.058z M287.029,300.434h-37.08l-8.284-66.275
                                                    h45.365V300.434z M411.912,134.484h57.31l-16.568,66.275h-49.026L411.912,134.484z M399.453,234.16h44.85l-16.568,66.275h-36.566
                                                    L399.453,234.16z M320.428,134.484h57.824l-8.284,66.275h-49.539V134.484z M320.428,234.159h45.365l-8.284,66.275h-37.08V234.159z
                                                     M287.029,134.484v66.275h-49.539l-8.284-66.275H287.029z M137.388,134.484h58.158l8.284,66.275h-49.873L137.388,134.484z
                                                     M162.307,234.159h45.699l8.284,66.275h-37.414L162.307,234.159z M178.315,458.141c-12.043,0-21.841-9.798-21.841-21.842
                                                    c0-12.043,9.798-21.841,21.841-21.841s21.841,9.798,21.841,21.841C200.156,448.343,190.358,458.141,178.315,458.141z
                                                     M402.351,458.141c-12.043,0-21.841-9.798-21.841-21.842c0-12.043,9.798-21.841,21.841-21.841
                                                    c12.043,0,21.841,9.798,21.841,21.841C424.192,448.343,414.394,458.141,402.351,458.141z"/>
                </g>
              </g>
            </svg>
            </span><span class="item-count">03</span></a>
            <div class="of-notification-comment">
              <div class="of-nt-text">
                <h5>Shopping Cart</h5>
                <h6>Your Have 3 Item In Your Cart</h6>
              </div>
              <div class="of-nt-scroll">
                <div class="of-nt-flex">
                  <div class="of-nt-img"><img src="assets/images/product2.png" alt=""/></div>
                  <div class="of-nt-cmnt">
                    <p>Ceiling Light<span>
                      <svg xmlns="http://www.w3.org/2000/svg" width="9px" height="8px">
                        <defs>
                          <filter>
                            <feFlood flood-color="#222222" flood-opacity="1" result="floodOut"></feFlood>
                            <feComposite operator="atop" in="floodOut" in2="SourceGraphic" result="compOut"></feComposite>
                            <feBlend mode="normal" in="compOut" in2="SourceGraphic"></feBlend>
                          </filter>
                        </defs>
                        <g>
                          <path fill-rule="evenodd" fill="#222222" d="M4.713,3.998 L7.864,0.850 C8.060,0.654 8.060,0.337 7.864,0.142 C7.668,-0.054 7.351,-0.054 7.155,0.142 L4.005,3.290 L0.854,0.142 C0.659,-0.054 0.342,-0.054 0.146,0.142 C-0.050,0.337 -0.050,0.654 0.146,0.850 L3.296,3.998 L0.146,7.146 C-0.050,7.341 -0.050,7.658 0.146,7.854 C0.244,7.952 0.372,8.001 0.500,8.001 C0.628,8.001 0.756,7.952 0.854,7.854 L4.005,4.706 L7.155,7.854 C7.253,7.952 7.381,8.001 7.510,8.001 C7.638,8.001 7.766,7.952 7.864,7.854 C8.060,7.658 8.060,7.341 7.864,7.146 L4.713,3.998 Z"></path>
                        </g>
                      </svg>
                      </span></p>
                    <div class="int-table-quantity">
                      <div class="quantity-wrapper">
                        <div class="quantity-qty">
                          <h5>$100</h5>
                        </div>
                        <div class="input-group"><span class="quantity-minus">- </span>
                          <input type="number" class="quantity" value="2">
                          <span class="quantity-plus">+</span></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="of-nt-flex">
                  <div class="of-nt-img"><img src="assets/images/product3.png" alt=""/></div>
                  <div class="of-nt-cmnt">
                    <p>Wooden Sofa<span>
                      <svg xmlns="http://www.w3.org/2000/svg" width="9px" height="8px">
                        <defs>
                          <filter>
                            <feFlood flood-color="#222222" flood-opacity="1" result="floodOut"></feFlood>
                            <feComposite operator="atop" in="floodOut" in2="SourceGraphic" result="compOut"></feComposite>
                            <feBlend mode="normal" in="compOut" in2="SourceGraphic"></feBlend>
                          </filter>
                        </defs>
                        <g>
                          <path fill-rule="evenodd" fill="#222222" d="M4.713,3.998 L7.864,0.850 C8.060,0.654 8.060,0.337 7.864,0.142 C7.668,-0.054 7.351,-0.054 7.155,0.142 L4.005,3.290 L0.854,0.142 C0.659,-0.054 0.342,-0.054 0.146,0.142 C-0.050,0.337 -0.050,0.654 0.146,0.850 L3.296,3.998 L0.146,7.146 C-0.050,7.341 -0.050,7.658 0.146,7.854 C0.244,7.952 0.372,8.001 0.500,8.001 C0.628,8.001 0.756,7.952 0.854,7.854 L4.005,4.706 L7.155,7.854 C7.253,7.952 7.381,8.001 7.510,8.001 C7.638,8.001 7.766,7.952 7.864,7.854 C8.060,7.658 8.060,7.341 7.864,7.146 L4.713,3.998 Z"></path>
                        </g>
                      </svg>
                      </span></p>
                    <div class="int-table-quantity">
                      <div class="quantity-wrapper">
                        <div class="quantity-qty">
                          <h5>$65</h5>
                        </div>
                        <div class="input-group"><span class="quantity-minus">- </span>
                          <input type="number" class="quantity" value="2">
                          <span class="quantity-plus">+</span></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="of-nt-flex">
                  <div class="of-nt-img"><img src="assets/images/product.png" alt=""/></div>
                  <div class="of-nt-cmnt">
                    <p>Dining Chair<span>
                      <svg xmlns="http://www.w3.org/2000/svg" width="9px" height="8px">
                        <defs>
                          <filter>
                            <feFlood flood-color="#222222" flood-opacity="1" result="floodOut"></feFlood>
                            <feComposite operator="atop" in="floodOut" in2="SourceGraphic" result="compOut"></feComposite>
                            <feBlend mode="normal" in="compOut" in2="SourceGraphic"></feBlend>
                          </filter>
                        </defs>
                        <g>
                          <path fill-rule="evenodd" fill="#222222" d="M4.713,3.998 L7.864,0.850 C8.060,0.654 8.060,0.337 7.864,0.142 C7.668,-0.054 7.351,-0.054 7.155,0.142 L4.005,3.290 L0.854,0.142 C0.659,-0.054 0.342,-0.054 0.146,0.142 C-0.050,0.337 -0.050,0.654 0.146,0.850 L3.296,3.998 L0.146,7.146 C-0.050,7.341 -0.050,7.658 0.146,7.854 C0.244,7.952 0.372,8.001 0.500,8.001 C0.628,8.001 0.756,7.952 0.854,7.854 L4.005,4.706 L7.155,7.854 C7.253,7.952 7.381,8.001 7.510,8.001 C7.638,8.001 7.766,7.952 7.864,7.854 C8.060,7.658 8.060,7.341 7.864,7.146 L4.713,3.998 Z"></path>
                        </g>
                      </svg>
                      </span></p>
                    <div class="int-table-quantity">
                      <div class="quantity-wrapper">
                        <div class="quantity-qty">
                          <h5>$86</h5>
                        </div>
                        <div class="input-group"><span class="quantity-minus">- </span>
                          <input type="number" class="quantity" value="2">
                          <span class="quantity-plus">+</span></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="int-flex-total">
                <h4>Order Total - </h4>
                <h5>$251</h5>
              </div>
              <div class="int-sop-cart-btn"><a href="cart.html" class="ad-btn">View cart</a><a href="checkout.html" class="ad-btn">checkout</a></div>
            </div>
          </div>
          <div class="notification-wrapper header-links"><a href="javascript:void(0);" class="notification-info"><span class="header-icon">
            <svg enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
              <path d="m450.201 407.453c-1.505-.977-12.832-8.912-24.174-32.917-20.829-44.082-25.201-106.18-25.201-150.511 0-.193-.004-.384-.011-.576-.227-58.589-35.31-109.095-85.514-131.756v-34.657c0-31.45-25.544-57.036-56.942-57.036h-4.719c-31.398 0-56.942 25.586-56.942 57.036v34.655c-50.372 22.734-85.525 73.498-85.525 132.334 0 44.331-4.372 106.428-25.201 150.511-11.341 24.004-22.668 31.939-24.174 32.917-6.342 2.935-9.469 9.715-8.01 16.586 1.473 6.939 7.959 11.723 15.042 11.723h109.947c.614 42.141 35.008 76.238 77.223 76.238s76.609-34.097 77.223-76.238h109.947c7.082 0 13.569-4.784 15.042-11.723 1.457-6.871-1.669-13.652-8.011-16.586zm-223.502-350.417c0-14.881 12.086-26.987 26.942-26.987h4.719c14.856 0 26.942 12.106 26.942 26.987v24.917c-9.468-1.957-19.269-2.987-29.306-2.987-10.034 0-19.832 1.029-29.296 2.984v-24.914zm29.301 424.915c-25.673 0-46.614-20.617-47.223-46.188h94.445c-.608 25.57-21.549 46.188-47.222 46.188zm60.4-76.239c-.003 0-213.385 0-213.385 0 2.595-4.044 5.236-8.623 7.861-13.798 20.104-39.643 30.298-96.129 30.298-167.889 0-63.417 51.509-115.01 114.821-115.01s114.821 51.593 114.821 115.06c0 .185.003.369.01.553.057 71.472 10.25 127.755 30.298 167.286 2.625 5.176 5.267 9.754 7.861 13.798z"/>
            </svg>
            </span><span class="count-notification"></span></a>
            <div class="recent-notification">
              <div class="drop-down-header">
                <h4>All Notification</h4>
                <p>You have 6 new notifications</p>
              </div>
              <ul>
                <li><a href="javascript:void(0);">
                  <h5><i class="fas fa-exclamation-circle mr-2"></i>Storage Full</h5>
                  <p>Lorem ipsum dolor sit amet,consectetuer.</p>
                  </a></li>
                <li><a href="javascript:void(0);">
                  <h5><i class="far fa-envelope mr-2"></i>New Membership</h5>
                  <p>Lorem ipsum dolor sit amet,consectetuer.</p>
                  </a></li>
              </ul>
              <div class="drop-down-footer"><a href="javascript:void(0);" class="btn sm-btn">View All </a></div>
            </div>
          </div>
          <!--个人信息-->
          <div class="user-info-wrapper header-links">
            <a href="javascript:void(0);" class="user-info"><img th:src="'http://localhost:8088/'+${session.image}" alt="" class="user-img">
              <div class="blink-animation"><span class="blink-circle"></span><span class="main-circle"></span></div>
            </a>
            <div class="user-info-box">
              <div class="drop-down-header">
                <h4>[[${session.currentUser}]]</h4>
                <p>[[${session.email}]]</p>
              </div>
              <ul>
                <li><a th:href="@{/profile}"><i class="far fa-edit"></i>个人信息</a></li>
                <li><a href="javascript:void(0);"><i class="fas fa-cog"></i>设置 </a></li>
                <li><a th:href="@{/logout}"><i class="fas fa-sign-out-alt"></i>退出 </a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- Sidebar Start -->
  <aside class="sidebar-wrapper">
    <div class="side-menu-wrap">
      <ul class="main-menu">
        <li><a th:href="@{/food/listFood}" class="active"><span class="icon-menu feather-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
            <polyline points="9 22 9 12 15 12 15 22"></polyline>
          </svg>
          </span><span class="menu-text">菜单管理</span></a>
        </li>

        <li><a th:href="@{/customer/listCustomer}"><span class="icon-menu feather-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-package">
            <line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line>
            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
            <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
            <line x1="12" y1="22.08" x2="12" y2="12"></line>
          </svg>
          </span><span class="menu-text">客户管理 </span></a>
        </li>

        <li><a th:href="@{/order/listOrder}"><span class="icon-menu feather-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-truck">
            <rect x="1" y="3" width="15" height="13"></rect>
            <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
            <circle cx="5.5" cy="18.5" r="2.5"></circle>
            <circle cx="18.5" cy="18.5" r="2.5"></circle>
          </svg>
          </span><span class="menu-text">订单管理 </span></a>
        </li>

        <li><a th:href="@{/count}"><span class="icon-menu feather-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pie-chart">
            <path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path>
            <path d="M22 12A10 10 0 0 0 12 2v10z"></path>
          </svg>
          </span><span class="menu-text">销售量统计 </span></a>
        </li>

        <li><a th:href="@{/total}"><span class="icon-menu feather-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pie-chart">
            <path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path>
            <path d="M22 12A10 10 0 0 0 12 2v10z"></path>
          </svg>
          </span><span class="menu-text">销售额统计 </span></a>
        </li>

        <li><a th:href="@{/store/listStore}"><span class="icon-menu feather-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers">
            <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
            <polyline points="2 17 12 22 22 17"></polyline>
            <polyline points="2 12 12 17 22 12"></polyline>
          </svg>
          </span><span class="menu-text">店铺管理 </span></a>
        </li>

        <li><a th:href="@{/stock/listStock}"><span class="icon-menu feather-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
            <line x1="16" y1="2" x2="16" y2="6"></line>
            <line x1="8" y1="2" x2="8" y2="6"></line>
            <line x1="3" y1="10" x2="21" y2="10"></line>
          </svg>
          </span><span class="menu-text">库存管理 </span></a>
        </li>

        <li><a th:href="@{/pwd}"><span class="icon-menu feather-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-grid nav-icon">
            <rect x="3" y="3" width="7" height="7"></rect>
            <rect x="14" y="3" width="7" height="7"></rect>
            <rect x="14" y="14" width="7" height="7"></rect>
            <rect x="3" y="14" width="7" height="7"></rect>
          </svg>
          </span><span class="menu-text">修改密码 </span></a>
        </li>

      </ul>
    </div>
  </aside>
  <!-- Container Start -->
  <div class="page-wrapper">
    <div class="main-content"><!-- Page Title Start -->
      <div class="row">
        <div class="colxl-12 col-lg-12 col-md-12 col-sm-12 col-12">
          <div class="page-title-wrapper">
            <div class="page-title-box">
              <h4 class="page-title bold">销售量统计</h4>
            </div>
            <div class="breadcrumb-list">
              <ul>
                <li class="breadcrumb-link"><a href="javascript:void(0);"><i class="fas fa-home mr-2"></i>Home</a></li>
                <li class="breadcrumb-link active">销售量统计</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- Chart Start -->
      <div class="row">
        <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12"><!-- Basic Area Chart -->
          <div class="card chart-card">
            <div class="card-header">
              <h4>3D饼状图</h4>
            </div>
            <div class="card-body">

              <div class="chart-holder">
               <!-- <div id="chartA"></div> -->
                <!--饼状图-->
			   <div id="container" style="height: 400px"></div>
                <script>
                  var type=new  Array();
                  var count=new  Array();
                  axios({
                    method:"get",
                    url:"/main/mainMenu"
                  }).then(function (rep){
                    console.log(rep)
                    for (let i = 0; i < rep.data.length; i++) {

                      const repElement = rep.data[i];
                      type[i]=repElement.type
                      count[i]=repElement.mount
                      console.log(type[i])
                      //console.log(count[])
                      // JS 代码
                      var chart = Highcharts.chart('container', {
                        chart: {
                          type: 'pie',
                          options3d: {
                            enabled: true,
                            alpha: 45
                          }
                        },
                        title: {
                          text: '不同店铺菜品销售数量对比'
                        },
                        subtitle: {
                          text: '销售量的3D环形图'
                        },
                        plotOptions: {
                          pie: {
                            innerSize: 100,
                            depth: 45
                          }
                        },
                        series: [{
                          name: '销售数量',
                          data: [
                            [type[0],count[0]],
                            [type[1],count[1]],
                            [type[2],count[2]],
                            [type[3],count[3]],
                            [type[4],count[4]],
                            [type[5],count[5]],
                            [type[6],count[6]],
                            [type[7],count[7]],
                            [type[8],count[8]],
                            [type[9],count[9]],
                            [type[10],count[10]],
                            [type[11],count[11]],
                          ]
                        }]
                      });
                    }
                  })

                </script>
              </div>

            </div>
          </div>
        </div>
        <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12"><!-- Area Spaline Chart -->
          <div class="card chart-card">
            <div class="card-header">
              <h4>柱状图</h4>
            </div>
            <div class="card-body">
              <div class="chart-holder">
                <!--柱状图-->
                <!-- <div id="chartB"></div> -->
                <div id="container1"></div>
                <script>
                  var type=new  Array();
                  var count=new  Array();
                  axios({
                    method:"get",
                    url:"/main/mainMenu"
                  }).then(function (rep){
                    console.log(rep)
                    for (let i = 0; i < rep.data.length; i++) {
                      const repElement = rep.data[i];
                      type[i]=repElement.type
                      count[i]=repElement.mount
                      console.log(count[i])

                      // JS 代码
                      var chart = Highcharts.chart('container1', {
                        title: {
                          text: '菜品销售量排行榜'
                        },
                        subtitle: {
                          text: ''
                        },
                        xAxis: {
                          categories: type
                        },
                        series: [{
                          type: 'column',
                          colorByPoint: true,
                          data: count,
                          showInLegend: false
                        }]
                      });
                      // 给 wrapper 添加点击事件
                      Highcharts.addEvent(document.getElementById('wrapper'), 'click', function(e) {
                        var target = e.target,
                                button = null;
                        if(target.tagName === 'BUTTON') { // 判断点的是否是 button
                          button = target.id;
                          switch(button) {
                            case 'plain':
                              chart_count.update({
                                chart: {
                                  inverted: false,
                                  polar: false
                                },
                                subtitle: {
                                  text: '普通的'
                                }
                              });
                              break;
                            case 'inverted':
                              chart_count.update({
                                chart: {
                                  inverted: true,
                                  polar: false
                                },
                                subtitle: {
                                  text: '反转'
                                }
                              });
                              break;
                            case 'polar':
                              chart_count.update({
                                chart: {
                                  inverted: false,
                                  polar: true
                                },
                                subtitle: {
                                  text: '极地图'
                                }
                              });
                              break;
                          }
                        }
                      });
                    }
                  })



                </script>
              </div>
            </div>
          </div>
        </div>
      </div>


      </div>

    </div>
  </div>
</div>
<!-- Slide Cart Box -->
<div class="slide-setting-box">
  <div class="slide-setting-holder">
    <div class="setting-box-head">
      <h4>General Settings</h4>
      <a href="javascript:void(0);" class="close-btn">Close</a></div>
    <div class="setting-box-body">
      <div class="p-4">
        <div class="switch-settings">
          <div class="d-flex mb-3"><span class="mr-auto fs-15">Notifications</span>
            <div class="checkbox checkbox-toggle">
              <input id="checkbox55" type="checkbox">
              <label for="checkbox55"></label>
            </div>
          </div>
          <div class="d-flex mb-3"><span class="mr-auto fs-15">Show your emails</span>
            <div class="checkbox checkbox-toggle">
              <input id="checkbox56" type="checkbox">
              <label for="checkbox56"></label>
            </div>
          </div>
          <div class="d-flex mb-3"><span class="mr-auto fs-15">Show Task statistics</span>
            <div class="checkbox checkbox-toggle">
              <input id="checkbox57" type="checkbox">
              <label for="checkbox57"></label>
            </div>
          </div>
          <div class="d-flex mb-3"><span class="mr-auto fs-15">Show recent activity</span>
            <div class="checkbox checkbox-toggle">
              <input id="checkbox58" type="checkbox">
              <label for="checkbox58"></label>
            </div>
          </div>
          <div class="d-flex mb-3"><span class="mr-auto fs-15">System Logs</span>
            <div class="checkbox checkbox-toggle">
              <input id="checkbox59" type="checkbox">
              <label for="checkbox59"></label>
            </div>
          </div>
          <div class="d-flex mb-3"><span class="mr-auto fs-15">Error Reporting</span>
            <div class="checkbox checkbox-toggle">
              <input id="checkbox60" type="checkbox">
              <label for="checkbox60"></label>
            </div>
          </div>
          <div class="d-flex mb-3"><span class="mr-auto fs-15">Show your status to all</span>
            <div class="checkbox checkbox-toggle">
              <input id="checkbox61" type="checkbox">
              <label for="checkbox61"></label>
            </div>
          </div>
          <div class="d-flex"><span class="mr-auto fs-15">Keep up to date</span>
            <div class="checkbox checkbox-toggle">
              <input id="checkbox62" type="checkbox">
              <label for="checkbox62"></label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="p-3 border-top border-bottom">
      <h5 class="border-bottom-0 mb-0">Overview</h5>
    </div>
    <div class="p-4">
      <div class="progress-wrapper">
        <div class="mb-3">
          <p class="mb-2">Achieves<span class="float-right text-muted font-weight-normal">95%</span></p>
          <div class="progress h-1">
            <div class="progress-bar bg-primary col-3" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
      <div class="progress-wrapper pt-2">
        <div class="mb-3">
          <p class="mb-2">Projects<span class="float-right text-muted font-weight-normal">65%</span></p>
          <div class="progress">
            <div class="progress-bar bg-secondary col-3" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
      <div class="progress-wrapper pt-2">
        <div class="mb-3">
          <p class="mb-2">Earnings<span class="float-right text-muted font-weight-normal">55%</span></p>
          <div class="progress">
            <div class="progress-bar bg-success col-8" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
      <div class="progress-wrapper pt-2">
        <div class="mb-3">
          <p class="mb-2">Balance<span class="float-right text-muted font-weight-normal">50%</span></p>
          <div class="progress h-1">
            <div class="progress-bar bg-warning w-50 " role="progressbar"></div>
          </div>
        </div>
      </div>
      <div class="progress-wrapper pt-2">
        <div class="mb-3">
          <p class="mb-2">Total Profits<span class="float-right text-muted font-weight-normal">80%</span></p>
          <div class="progress">
            <div class="progress-bar bg-info col-6" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
      <div class="progress-wrapper pt-2">
        <div class="mb-3">
          <p class="mb-2">Total Likes<span class="float-right text-muted font-weight-normal">75%</span></p>
          <div class="progress h-1">
            <div class="progress-bar bg-teal w-75" role="progressbar"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Color Setting -->
<div id="style-switcher">
  <div>
    <ul class="colors">
      <li>
        <p class='colorchange' id='color'></p>
      </li>
      <li>
        <p class='colorchange' id='color2'></p>
      </li>
      <li>
        <p class='colorchange' id='color3'></p>
      </li>
      <li>
        <p class='colorchange' id='color4'></p>
      </li>
      <li>
        <p class='colorchange' id='color5'></p>
      </li>
      <li>
        <p class='colorchange' id='style'></p>
      </li>
    </ul>
  </div>
  <div class="bottom"><a href="" class="settings"><i class="fa fa-cog" aria-hidden="true"></i></a></div>
</div>
<!-- Color Setting --><!-- Script Start -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/apexcharts/3.6.12/apexcharts.min.js"></script>
<script th:src="@{/js/apexchart/control-chart-apexcharts.js}">

</script><script th:src="@{/js/custom.js}"></script>
</body>
</html>
